<template>
  <u-tabbar
  :value="active"
  @change="(val: tabkeyEnum) => chang(val)"
  :fixed="true"
  :placeholder="true"
  :safeAreaInsetBottom="true"
  active-color="#41FF00E5"
  inactive-color="#fff"
  customStyle="background-color: #000;"
>
  <u-tabbar-item  v-for="(item) in tabList" :name="item.key" :text="item.name" >
    <template #active-icon>
			<span class="iconfont font-icon" style="font-size: 56rpx; color: #41FF00E5;" :class="item.icon"></span>
		</template>
		<template #inactive-icon>
			<span class="iconfont font-icon" style="font-size: 56rpx; color: #fff;" :class="item.icon"></span>
		</template>
  </u-tabbar-item>
</u-tabbar>
</template>
<script setup lang="ts">
import type { tabItemInter } from '@/utils/comment-inter';
import { tabkeyEnum } from '@/utils/common';
import { reactive, ref } from 'vue';

defineProps<{
  active: tabkeyEnum
}>()
const tabList = reactive<tabItemInter[]>([{
  key: tabkeyEnum.homeKey,
  name: '首页',
  path: '/pages/index/index',
  icon: 'icon-pay',
  activeIcon: 'icon-pay',
},{
  key: tabkeyEnum.reckrdKey,
  name: '',
  path: '/pages/record/record',
  icon: 'icon-plus',
  activeIcon: 'icon-plus',
},{
  key: tabkeyEnum.meKey,
  name: '我的',
  path: '/pages/me/me',
  icon: 'icon-wode-copy',
  activeIcon: 'icon-wode-copy',
  }])
const chang = (val: tabkeyEnum) => {
  const tabItem = tabList.find(item => item.key == val)
  uni.navigateTo({
    url: tabItem?.path as string
  })
}
</script>
<style lang="scss">
</style>